<template>
	<div class="page-container padding-20 query-list-container">
		<div v-show="$route.name === 'menuMgt'">
			<div class="toolbar-container">
				<el-button type="primary" icon="el-icon-plus" size="small" @click="addTopMenu()">添加一级菜单</el-button>
			</div>
			<el-table
				class="mt-20 el-table-modify"
				:data="tableData"
				border
				row-key="id"
				:expand-row-keys="expandRowKeys"
				@expand-change="expandChange"
			>
				<el-table-column prop="icon" label="图标" width="300">
					<template slot-scope="scope">
						<span>
							<svg-icon :iconClass="scope.row.icon"></svg-icon>
							{{scope.row.name}}
						</span>
					</template>
				</el-table-column>
				<!-- <el-table-column prop="name" align="center" label="菜单名称"></el-table-column> -->
				<el-table-column prop="express" label="菜单编码"></el-table-column>
				<el-table-column prop="url" label="URL"></el-table-column>
				<el-table-column prop="hidden" align="center" label="是否隐藏菜单">
					<template slot-scope="scope">{{scope.row.hidden ? '隐藏' : '显示'}}</template>
				</el-table-column>
				<el-table-column prop="remark" label="重定向URL"></el-table-column>
				<el-table-column prop="orderNum" align="center" label="排序"></el-table-column>
				<el-table-column label="操作" align="center" fixed="right" width="200">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="addSubMenu(scope.row)">添加下级</el-button>
						<el-button size="mini" type="text" @click="navTo(scope.row)">编辑</el-button>
						<el-button size="mini" type="text" @click="deleteMenu(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<router-view v-if="$route.name !== 'menuMgt'" :editData="editData" @updateData="updateData"></router-view>
	</div>
</template>

<script>
import { menuQuery, menuDelete } from "@/api/menu";
import SvgIcon from '@/components/SvgIcon';

export default {
	name: "MenuMgt",
	components: { SvgIcon },
	data() {
		return {
			tableData: [],
			editData: null,
			parentMenu: null,
			expandRowKeys: [],
			visible: false
		};
	},
	methods: {
		expandChange(row, expanded) {
			if (expanded) {
				this.expandRowKeys.push(row.id);
			} else {
				this.expandRowKeys = this.expandRowKeys.filter(key => {
					return key != row.id;
				});
			}
		},
		addTopMenu() {
			this.parentMenu = null;
			this.navTo({ parentId: null });
		},
		addSubMenu(menu) {
			this.parentMenu = menu;
			this.navTo({ parentId: menu.id });
		},
		navTo(data) {
			this.editData = data;
			if (data.id) {
				this.$router.push({ name: "editMenu" });
			} else {
				this.$router.push({ name: "addMenu" });
			}
		},
		updateData(data) {
			data && this.requestData();
		},
		async requestData() {
			try {
				const { data } = await menuQuery();
				this.tableData = data;
			} catch (err) {
				console.log(err);
			}
		},
		async deleteMenu(row) {
			try {
				this.$confirm('确定要恢复开放该站点吗？', {
					type: 'warning',
					callback: async (action) => {
						if (action == 'confirm') {
							await menuDelete(row.id);
							this.$message.success("删除成功");
							this.requestData();
						}
					}
				});
			} catch (err) {
				console.log(err);
			}
		}
	},
	created() {
		this.requestData();
	}
};
</script>

<style lang="scss">
</style>